<template>
    <div style="background-color:#f1f3f5;">
        <top></top>
        <div>
            <div class="category">
                <div class="title-text"><h4>所有分类</h4></div>
                <div class="category-groups">
                    <div class="category-groups-product" v-for="(product,index) in categories" :key="index">
                        <div class="large-category">
                            {{ product.large_category }}
                        </div>
                        <div class="small-category" v-for="(product,key) in product.small_category" :key=key>
                            <a @click="showProduct()">{{ product }}</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="items">
                <div class="product-row" v-for="(row, index) in productRows" :key="index">
                    <div class="product" v-for="(product, i) in row" :key="i"
                         @click="toItemInfo(product.itemId)">
                        <img :src="product.image" alt="Product Image">
                        <h3>{{ product.itemName }}</h3>
                        <p>￥ {{ product.price }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import top from "@/components/common/top.vue";
import axios from "axios";

export default {
    name: "product",
    components: {top},
    data() {
        return {
            categories: [
                {large_category: "手机", small_category: ["Pocket", "Mate", "P系列", "Nova", "畅享"]},
                {large_category: "平板", small_category: ["Mate Pad", "M系列", "配件"]},
                {
                    large_category: "电脑",
                    small_category: ["Mate Book X", "Mate Book", "Mate Book D", "Mate Book E", "Mate View", "Mate Pad"]
                }],
            products: window.sessionStorage.getItem("products"),
            category: window.sessionStorage.getItem('product_name'),
            searchInfo: window.sessionStorage.getItem('searchInfo')
        }
    },
    computed: {
        productRows() {
            const rows = [];
            const numColumns = 4;
            for (let i = 0; i < this.products.length; i += numColumns) {
                rows.push(this.products.slice(i, i + numColumns));
            }
            return rows;
        }
    },
    mounted() {
        this.search();
        this.showItem();
    },
    created() {

    },
    methods: {
        showItem() {
            if (this.category !== '' && this.searchInfo === '') {
                axios({
                    method: "get",
                    url: `items/categories/${this.category}`
                }).then(res => {
                    this.products = res.data.data
                    this.showItemImage()
                })
            }
        },
        showItemImage() {
            for (let i = 0; i < this.products.length; i++) {
                axios({
                    method: "get",
                    url: `images/items/${this.products[i].itemId}`,
                    responseType: "blob"
                }).then(res => {
                    this.products[i].image = URL.createObjectURL(res.data);
                })
            }
        },
        toItemInfo(item_id) {
            window.sessionStorage.setItem("item_id", item_id)
            this.$router.push({
                name: "item",
            })
        },
        search() {
            if (this.category === '') {
                axios({
                    method: "get",
                    url: `/items/someItems/${this.searchInfo}`
                }).then(res => {
                    console.log(res)
                    this.products = res.data.data
                    this.showItemImage()
                })
            }
        }
    }
}
</script>

<style scoped>
.category {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 10px 10px;
    margin: 30px auto;
    width: 80%;
}

.title-text {
    font-size: 17px;
    margin-left: 20px;
}

.category-groups {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    font-size: 18px;
    margin-left: 20px;
}

.large-category {
    margin-right: 30px;
    font-size: 19px;
    font-weight: 500;
}

.category-groups-product {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
}

.small-category a {
    padding: 0 40px;

}

.items {
    width: 80%;
    margin: 0 auto;
    padding: 10px 10px;
    /*background-color: #fff;*/
}

.product-row {
    /*width: 100%;*/
    display: flex;
    flex-wrap: wrap;
}

.product {
    width: 22%;
    text-align: center;
    background-color: #fff;
    padding: 10px;
    height: 350px;
    margin-bottom: 50px;
    transition: transform 0.2s ease-in-out;
    margin-right: 1.8%;
}

.product:hover {
    transform: translateY(-5px);
    cursor: pointer;
}

.product-row:first-child {
    margin-left: 0;
}

.product-row :last-child {
    margin-right: 0;
}

.product img {
    width: 100%;
    height: 85%;
}
</style>